<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-01-06 17:19:38
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2023-03-08 15:13:47
 * @FilePath: \mould\src\components\public\ConsumptionCharts.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="com-container" style="fontSize:12px">
        <!-- :style="popheight+'px'" :style="RiskWidth" -->
        <div class="com-chart com-charts" ref="echarts" style="z-index: 555; position: relative"></div>
    </div>
</template>
  
<script>


export default {
    props: ["commonData", "time1", "time2", "checkType"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            xData: null,
            seriesData: null,
            dataOption: null,
        };
    },
    watch: {
        // commonData: function (data) {
        //     this.allData = data

        //     this.getData();
        // },
        commonData: {
            handler(newVal) {
                if (newVal) {

                    this.allData = newVal;

                    this.getData();

                }
            },
            immediate: true,
        },
        checkType: {
            handler(newVal) {
                if (newVal) {
                    this.xData = newVal;
                    this.getData();
                }
            },
            immediate: true,
        },

        time1: function () {
        },
        time2: function () {
        },
    },

    mounted() {
        setTimeout(() => {
            this.initChart();
            // this.getData();
            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        }, 500);
    },

    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.echarts);


            var option = {
                title: {
                    left: "center",
                },

                grid: {
                    left: "5%",
                    right: "5%",
                    bottom: "12%",
                    top: "13%",
                    containLabel: true,
                },
                legend: {
                    left: "center",
                    top: "5%",
                    icon: 'roundRect',
                    textStyle: {
                        color: "#90979c",
                    },
                },

                calculable: true,
                xAxis: [
                    {
                        type: "category",

                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#9D9EA0",
                            },
                        },
                        splitLine: {
                            //坐标轴在 grid 区域中的分隔线。
                            show: false,
                            lineStyle: {
                                color: "#DEDEDE",
                            },
                        },
                        // data: xData,
                    },
                ],

                yAxis: [
                    {
                        type: "value",
                        name: "kg",

                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#9D9EA0",
                            },
                        },
                        splitLine: {
                            //坐标轴在 grid 区域中的分隔线。
                            show: true,
                            lineStyle: {
                                color: "#DEDEDE",
                                type: "dotted",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#9D9EA0",
                            },
                        },
                    },
                ],

                dataZoom: [
                    {
                        show: true,
                        height: 10,
                        xAxisIndex: [0],
                        bottom: 60,

                        start: 10,
                        end: 80,
                        // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                        // handleSize: '110%',
                        // handleStyle: {
                        //     color: "#5B3AAE",
                        // },
                        // textStyle: {
                        //     color: "rgba(204,187,225,0.5)",
                        // },
                        // fillerColor: "rgba(67,55,160,0.4)",
                        // borderColor: "rgba(204,187,225,0.5)",
                    },
                    {
                        type: "inside",
                        show: true,
                        height: 15,
                        start: 1,
                        end: 35,
                    },
                ],
            };
            this.chartInstance.setOption(option);
        },
        getData() {

            var data = this.allData.data;

            var type = this.xData;

            var F_WaterActualValue = []; //水
            var F_Cement1ActualValue = []; // 水泥1
            var F_Cement2ActualValue = []; // 水泥2
            var F_Aggregate1ActualValue = []; // 骨料1
            var F_Aggregate2ActualValue = []; // 骨料2
            var F_Aggregate3ActualValue = []; // 骨料3
            var F_Aggregate4ActualValue = []; // 骨料4
            var F_Aggregate5ActualValue = []; // 骨料5
            var F_OreActualValue = []; // 粉煤灰
            var F_FlyashActualValue = []; // 矿粉
            var F_Admixture1ActualValue = []; // 外加剂1
            var F_Admixture2ActualValue = []; // 外加剂2
            var xData = [];
            if (data) {
                data.map((i) => {
                    xData.push(i.F_DischargeDates);
                    F_WaterActualValue.push(
                        i.F_WaterActualValue //水
                    );
                    F_Cement1ActualValue.push(
                        i.F_Cement1ActualValue //水泥1
                    );
                    F_Cement2ActualValue.push(
                        i.F_Cement2ActualValue //水泥1
                    );
                    F_Aggregate1ActualValue.push(
                        i.F_Aggregate1ActualValue //水泥1
                    );
                    F_Aggregate2ActualValue.push(
                        i.F_Aggregate2ActualValue //骨料2
                    );
                    F_Aggregate3ActualValue.push(
                        i.F_Aggregate3ActualValue //骨料3
                    );
                    F_Aggregate4ActualValue.push(
                        i.F_Aggregate4ActualValue //骨料4
                    );
                    F_Aggregate5ActualValue.push(
                        i.F_Aggregate5ActualValue //骨料5
                    );
                    F_OreActualValue.push(
                        i.F_OreActualValue //粉煤灰
                    );
                    // F_Aggregate5ActualValue.push(0//骨料5
                    // )
                    // F_OreActualValue.push(0//粉煤灰
                    // )
                    F_FlyashActualValue.push(
                        i.F_FlyashActualValue //矿粉
                    );
                    F_Admixture1ActualValue.push(
                        i.F_Admixture1ActualValue //外加剂1
                    );
                    F_Admixture2ActualValue.push(
                        i.F_Admixture2ActualValue //外加剂2
                    );
                });
            }

            var that = this;

            setTimeout(() => {
                if (type && data) {
                    that.updateChart(
                        type,
                        xData,
                        data,
                        F_WaterActualValue,
                        F_Cement1ActualValue,
                        F_Cement2ActualValue,
                        F_Aggregate1ActualValue,
                        F_Aggregate2ActualValue,
                        F_Aggregate3ActualValue,
                        F_Aggregate4ActualValue,
                        F_Aggregate5ActualValue,
                        F_OreActualValue,
                        F_FlyashActualValue,
                        F_Admixture1ActualValue,
                        F_Admixture2ActualValue
                    );
                }
            }, 500);
        },
        updateChart(
            type,
            xData,
            data,
            data1,
            data2,
            data3,
            data4,
            data5,
            data6,
            data7,
            data8,
            data9,
            data10,
            data11,
            data12
        ) {
            var seriesTotal = [
                {
                    name: "水",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#6DC5E0",
                    },

                    data: data1,
                },
                {
                    name: "水泥1",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#4BB6E5",
                    },

                    data: data2,
                },
                {
                    name: "水泥2",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#FF9A8C",
                    },
                    data: data3,
                },
                {
                    name: "骨料1",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#96EDD3",
                    },
                    data: data4,
                },
                {
                    name: "骨料2",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#59939A",
                    },
                    data: data5,
                },
                {
                    name: "骨料3",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#B1BAAC",
                    },
                    data: data6,
                },
                {
                    name: "骨料4",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#DBA390",
                    },
                    data: data7,
                },
                {
                    name: "骨料5",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#FFC87D",
                    },
                    data: data8,
                },
                {
                    name: "矿粉",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#595F6A",
                    },
                    data: data9,
                },
                {
                    name: "粉煤灰",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#9BBD9B",
                    },
                    data: data10,
                },
                {
                    name: "外加剂1",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#E95F85",
                    },
                    data: data11,
                },
                {
                    name: "外加剂2",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#DB99C6",
                    },
                    data: data12,
                },
                {
                    name: "全选",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#778CCD",
                    },

                },
                {
                    name: "全不选",
                    type: "line",
                    symbolSize: 10,
                    symbol: "circle",
                    itemStyle: {
                        color: "#D0E3FC",
                    },
                },
            ];
            // var series = [];
            // type.map((item) => {
            //   seriesTotal.map((i) => {
            //     if (item == i.name) {
            //       series.push(i);
            //     }
            //   });
            // });

            this.seriesData = seriesTotal;
            var that = this
            var dataOption = {
                title: {
                    text:
                        this.time1.substr(0, 10) +
                        "至" +
                        this.time2.substr(0, 10) +
                        "材料用量分析图",
                },
                legend: {
                    data: [
                        "全选", "全不选",
                        "水",
                        "水泥1",
                        "水泥2",
                        "骨料1",
                        "骨料2",
                        "骨料3",
                        "骨料4",
                        "骨料5",
                        "矿粉",
                        "粉煤灰",
                        "外加剂1",
                        "外加剂2",
                    ],
                    selected: this.checkType

                },
                tooltip: {
                    show: true,
                    formatter: function (params) {

                        var str = "";
                        str =
                            "工程名称:" +
                            data[params.dataIndex].F_EngineeringName +
                            "<br/>" +
                            "工程部位:" +
                            data[params.dataIndex].F_EngineeringPartName +
                            "(t/h)" +
                            "<br/>" +
                            "实际方量:" +
                            data[params.dataIndex].F_ActualCalculation +
                            "(t)" +
                            "<br/>" +
                            "强度等级:" +
                            data[params.dataIndex].F_StrengthGrade +
                            "<br/>" +
                            "出料时间:" +
                            data[params.dataIndex].F_DischargeDates +
                            "<br/>" +
                            params.seriesName +
                            ":" +
                            params.value +
                            "(kg)";

                        return str;
                    },
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            readOnly: true,
                            lang: [this.time1.substr(0, 10) + "至" + this.time2.substr(0, 10) + "材料用量分析图", '关闭'],
                            optionToContent: function (opt) {
                                var series = opt.series;
                                var str = ''
                                var legend = ['水', '水泥1', '水泥2', '骨料1', '骨料2', '骨料3', '骨料4', '骨料5', '矿粉', '粉煤灰', '外加剂1', '外加剂2']
                                var s = []
                                legend.map(item => {
                                    if (that.checkType[item] == true) {
                                        s.push(item)
                                    }
                                })

                                s.map((item) => {
                                    str += '<td>' + item + '</td>'
                                })
                                var table = `<table class="echartsTable"><tbody><tr>`
                                    + '<td >工程名称</td>'
                                    + '<td >工程部位</td>'
                                    + '<td >实际方量</td>'
                                    + '<td >强度等级</td>'
                                    + str
                                    + '<td >出料时间</td>'
                                    + '</tr>';
                                var lineData = []
                                series.map(item => {
                                    s.map(i => {
                                        if (item.name == i) {
                                            lineData.push(item)
                                        }
                                    })
                                })

                                for (var i = 0, l = data.length; i < l; i++) {
                                    if (s.length == 0) {
                                        table += '<tr>'
                                            + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    }
                                    else if (s.length == 1) {
                                        table += '<tr>'
                                            + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    }
                                    else if (s.length == 2) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 3) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>'
                                            + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 4) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>'
                                            + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 5) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>'
                                            + '<td >' + lineData[4].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 6) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>' + '<td >' + lineData[4].data[i] + '</td>'
                                            + '<td >' + lineData[5].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 7) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>'
                                            + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>'
                                            + '<td >' + lineData[4].data[i] + '</td>'
                                            + '<td >' + lineData[5].data[i] + '</td>'
                                            + '<td >' + lineData[6].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 8) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>'
                                            + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>'
                                            + '<td >' + lineData[4].data[i] + '</td>'
                                            + '<td >' + lineData[5].data[i] + '</td>'
                                            + '<td >' + lineData[6].data[i] + '</td>'
                                            + '<td >' + lineData[7].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 9) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>'
                                            + '<td >' + lineData[4].data[i] + '</td>'
                                            + '<td >' + lineData[5].data[i] + '</td>'
                                            + '<td >' + lineData[6].data[i] + '</td>'
                                            + '<td >' + lineData[7].data[i] + '</td>'
                                            + '<td >' + lineData[8].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 10) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>'
                                            + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>'
                                            + '<td >' + lineData[4].data[i] + '</td>'
                                            + '<td >' + lineData[5].data[i] + '</td>'
                                            + '<td >' + lineData[6].data[i] + '</td>'
                                            + '<td >' + lineData[7].data[i] + '</td>'
                                            + '<td >' + lineData[8].data[i] + '</td>'
                                            + '<td >' + lineData[9].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 11) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>'
                                            + '<td >' + lineData[4].data[i] + '</td>'
                                            + '<td >' + lineData[5].data[i] + '</td>'
                                            + '<td >' + lineData[6].data[i] + '</td>'
                                            + '<td >' + lineData[7].data[i] + '</td>'
                                            + '<td >' + lineData[8].data[i] + '</td>'
                                            + '<td >' + lineData[9].data[i] + '</td>'
                                            + '<td >' + lineData[10].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    } else if (s.length == 12) {
                                        table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                                            + '<td>' + data[i].F_EngineeringPartName + '</td>'
                                            + '<td>' + data[i].F_ActualCalculation + '</td>'
                                            + '<td>' + data[i].F_StrengthGrade + '</td>'
                                            + '<td >' + lineData[0].data[i] + '</td>'
                                            + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                                            + '<td >' + lineData[3].data[i] + '</td>'
                                            + '<td >' + lineData[4].data[i] + '</td>'
                                            + '<td >' + lineData[5].data[i] + '</td>'
                                            + '<td >' + lineData[6].data[i] + '</td>'
                                            + '<td >' + lineData[7].data[i] + '</td>'
                                            + '<td >' + lineData[8].data[i] + '</td>'
                                            + '<td >' + lineData[9].data[i] + '</td>'
                                            + '<td >' + lineData[10].data[i] + '</td>'
                                            + '<td >' + lineData[11].data[i] + '</td>'
                                            + '<td>' + data[i].F_DischargeDates + '</td>'
                                            + '</tr>';
                                    }
                                }
                                table += '</tbody></table>';
                                return table;
                            }
                        },
                        magicType: {
                            type: ["line", "bar"],
                            option: {
                                type: "line",
                            },
                        },
                        restore: {},
                        saveAsImage: {},
                    },
                },
                xAxis: [
                    {
                        data: xData,
                    },
                ],
                series: seriesTotal,
            };
            this.chartInstance.off('legendselectchanged') //解决重复触发
            this.chartInstance.on('legendselectchanged', (params) => {

                var selected = params.selected;
                var name = params.name;
                // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
                // 使得 无 selected 对象
                if (name == '全选' && params.selected.全选 == true) {//需要配置一个legend为‘全选’的名称
                    selected = {
                        全选: true,
                        全不选: false,
                        水: true,
                        水泥1: true,
                        水泥2: true,
                        骨料1: true,
                        骨料2: true,
                        骨料3: true,
                        骨料4: true,
                        骨料5: true,
                        矿粉: true,
                        粉煤灰: true,
                        外加剂1: true,
                        外加剂2: true,
                    }

                } else if (name == '全不选' && params.selected.全不选 == true) {
                    selected = {
                        全选: false,
                        全不选: true,
                        水: false,
                        水泥1: false,
                        水泥2: false,
                        骨料1: false,
                        骨料2: false,
                        骨料3: false,
                        骨料4: false,
                        骨料5: false,
                        矿粉: false,
                        粉煤灰: false,
                        外加剂1: false,
                        外加剂2: false,
                    }
                } else {
                    if (selected.外加剂1 == true && selected.外加剂2 == true && selected.水 == true && selected.水泥1 == true && selected.水泥2 == true && selected.矿粉 == true && selected.粉煤灰 == true && selected.骨料1 == true && selected.骨料2 == true && selected.骨料3 == true && selected.骨料4 == true && selected.骨料5 == true) {
                        selected.全选 = true
                        selected.全不选 = false
                    } else if (selected.外加剂1 == false && selected.外加剂2 == false && selected.水 == false && selected.水泥1 == false && selected.水泥2 == false && selected.矿粉 == false && selected.粉煤灰 == false && selected.骨料1 == false && selected.骨料2 == false && selected.骨料3 == false && selected.骨料4 == false && selected.骨料5 == false) {
                        selected.全选 = false
                        selected.全不选 = true
                    } else {
                        selected.全选 = false
                        selected.全不选 = false
                    }




                    selected = params.selected
                }
                this.$emit('clickLegend', selected)
            })
            this.dataOption = dataOption;
            this.chartInstance.setOption(dataOption);
        },
        screenAdapter() {
            const titleFontSize = this.$refs.echarts.offsetWidth / 100;


            //   和分辨率大小相关的配置项
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: titleFontSize,
                        // fontWeight: 500
                    },
                },
            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();
        },
        clear() {

            // 清空上次echart数据
            for (var i = 0; i < this.seriesData.length; i++) {
                //置空关键！！！  清空名字和数据
                this.seriesData[i].data = [];
                this.seriesData.name = "";
            }
            this.chartInstance = null;

            this.chartInstance = this.$echarts.init(this.$refs.echarts);
            this.chartInstance.setOption(this.dataOption); //重新setOption
            // this.legend=[]
        },
    },
};
</script>
  
<style lang="less" scope>
.com-chart::after {
    //     display: block;
    //     content: "123";
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //   width: 50px;
    //   height: 40px;
    //   border: 1px solid red;
    //   z-index: 9999;
}

.com-charts ::after {
    //   display: block;
    //   content: "123";
    //   position: absolute;
    //   transform: translate(-50%,-50%);
    //   left: 50%;
    //   top: 60%;
    // width: 47%;
    // height: 90%;

    // z-index: 9999;
}

/* echarts表格样式 */
.echartsTable {
    width: 100%;
    text-align: center;
    min-height: 25px;
    line-height: 25px;
    border-collapse: collapse;
    padding: 2px;
    font-size: 12px;
}

.echartsTable,
.echartsTable tr th,
.echartsTable tr td {
    // border: 1px solid gray;
    // flex: 1;
    border-bottom: 1px solid #dddddd;
    text-align: left;
    padding: 2px 5px;
}

.echartsTable .typeshi {
    width: 50%;
}

.echartsTable tr:nth-child(even) {
    border-bottom: 1px solid gray;
    background: #f9f9f9;
}
</style>
  